<template>
    <el-checkbox
        v-model="checkAll"
        :indeterminate="isIndeterminate"
        @change="handleCheckAllChange">
        Check all
    </el-checkbox>
    <el-checkbox-group
        v-model="checkedCities"
        @change="handleCheckedCitiesChange">
        <el-checkbox v-for="city in cities" :key="city" :label="city" :value="city">{{ city }}
        </el-checkbox>
    </el-checkbox-group>
</template>
<script>
    export default{
        data(){
            return {
                checkAll:false,
                isIndeterminate :true,
                cities:['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen'],
                checkedCities:['Shanghai', 'Beijing']
            }
        },
        methods:{
            handleCheckAllChange:function(value){
                this.checkedCities = value ? this.cities : []
                this.isIndeterminate = false
            },
            handleCheckedCitiesChange:function(values){
                const checkedCount = values.length
                this.checkAll = checkedCount === this.cities.length
                this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length
            }
        }
    }
</script>